    <template>
  <div id="app">
    <!-- 导航 -->
    <div class="nav">
      <div class="left">
        <img class="logo" src="./assets/img/logo.png" alt="" />
        <router-link :to="{ name: 'Index' }">
          <h1 class="title">小贴吧</h1>
        </router-link>

        <router-link class="issues-list" :to="{ name: 'IssuesList' }"
          >等你来写</router-link
        >
      </div>
      <div class="search">
        <el-input v-model="search" placeholder="请输入内容"></el-input>
        <el-button icon="el-icon-search" circle></el-button>
      </div>
      <div class="right">
        <el-button type="primary" plain>提问题</el-button>
        <span>消息</span>
        <span>私信</span>
        <el-dropdown>
          <img class="myhead" src="./assets/img/头像.png" alt="" />
          <el-dropdown-menu slot="dropdown">
            <router-link :to="{ name: 'ArtList' }">
              <el-dropdown-item>个人主页</el-dropdown-item>
            </router-link>
            <div @click="logout" v-show="this.$store.state.user.token">
              <router-link :to="{ name: 'Login' }">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </router-link>
            </div>
            <div v-show="!this.$store.state.user.token">
              <router-link :to="{ name: 'Login' }">
                <el-dropdown-item style="text-align: center"
                  >登录</el-dropdown-item
                >
              </router-link>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import instance from "./utils/request";
import { Message } from "element-ui";
export default {
  name: "App",
  data() {
    return {
      search: "",
    };
  },

  methods: {
    logout() {
      //1.告知后端用户用户退出登录
      instance
        .get("/user/logout")
        .then((success) => {
          if (success.data.code == 10000) {
            Message.success("退出成功~");
            //2.清除登录信息状态(vuex + localStorage)
            this.$store.commit("logout");
          } else {
            Message.warning("退出失败，请稍后重试！");
          }
        })
        .catch((error) => {
          Message.error("退出异常，请稍后重试！");
          console.log(error);
        });
    },
  },
};
</script>

<style>
* {
  /* 防止边框将元素撑大 */
  box-sizing: border-box;
  /* 去除浏览器默认样式 */
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: rgb(245, 245, 245);
}

#app {
  height: 100%;
}

a {
  text-decoration: none;
  color: black;
}

.nav {
  height: 60px;
  width: 1525px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.nav .logo {
  width: 50px;
  height: 50px;
}

.nav div {
  margin: auto 10px;
}

.nav .left .title {
  font-size: 18px !important;
  color: rgba(0, 0, 0, 0.85);
}

.nav .left {
  width: 350px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav .search {
  width: 550px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav .right {
  width: 350px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav .myhead {
  width: 35px;
  height: 35px;
}

.nav .issues-list {
  color: #8493a5;
  transition: color 0.5s;
}

.nav .issues-list:hover {
  color: black;
}
</style>

